<template>
  <div class="bj material">
    <div class="container mt_30 mb_40">
      <el-row :gutter="20">
        <el-col :span="5">
          <div class="material_left">
            <!-- 头像 -->
            <div class="portrait_images mt_30">
              <img src="../../static/image/portrait.png" />
            </div>
            <!-- 电话 -->
            <div class="telephone">13042938023</div>
            <!-- text -->
            <div class="text">这家伙很懒，啥也没有写</div>
            <!-- 编辑 -->
            <div class="edit_img">
              <img src="../../static/image/xiugai@2x.png" width="14" />
            </div>
            <!--  -->
            <div style="margin-top: 60px;">
              <el-menu
                @select="handleOpen"
                :default-active="$route.path"
                class="el-menu-vertical-demo"
              >
                <el-menu-item :index="item.path" v-for="(item,index) in routerList" :key="index">
                  <i :class="item.icon"></i>
                  <span slot="title">{{item.name}}</span>
                </el-menu-item>
              </el-menu>
              <!--  -->
            </div>
          </div>
        </el-col>
        <el-col :span="19">
          <!-- 右侧 -->
          <router-view />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import personalCenter from "@/router/personalCenter";
export default {
  data() {
    return {
      routerList: [],
      activePath: ""
    };
  },
  created() {
    this.routerList = [];
    let childrenList = [].concat(personalCenter[0].children);
    for (let item of childrenList) {
      this.routerList.push({
        path: `${personalCenter[0].path}/${item.path}`,
        name: item.name,
        icon:item.icon
      });
    }
    console.log(this.routerList);
  },
  methods: {
    handleOpen(path) {
      // debugger;
      this.$router.push(path);
    },
    handleClose() {}
  }
};
</script>

<style scoped lang='less'>
.mb_40{
margin-bottom: 40px;
}
.el-menu{
  border-right:none
}
.ml_10 {
  margin-left: 10px;
}
.color_999 {
  color: #999;
}
.ml_23 {
  margin-left: 23px;
}
.ml {
  margin-left: 10px;
}
.color {
  color: #27a4fe;
}
.font_14 {
  font-size: 14px;
}
.color_666 {
  color: #666;
}
.bj {
  background: #f3f3f3;
  overflow: hidden;
  padding-bottom: 34px;
}
.mt_30 {
  margin-top: 30px;
}
.material_left {
  height: 565px;
  background: rgba(255, 255, 255, 1);
  overflow: hidden;
}
.portrait_images {
  width: 74px;
  height: 85px;
  margin: auto;
  border: 1px solid;
  margin-top: 30px;
}
.telephone {
  font-size: 16px;
  color: #444343;
  margin-top: 17px;
  text-align: center;
}
.text {
  color: #999;
  font-size: 12px;
  text-align: center;
  font-weight: 500;
}
.edit_img {
  text-align: center;
  padding-top: 11px;
}
.el-menu-item.is-active {
  color: #27a4fe;
  border-left: 2px solid #27a4fe;
  background: rgba(39, 164, 254, 0.1);
}
.ml_7 {
  margin-right: 7px;
}
.mt_60 {
  margin-top: 60px;
}
.el-menu-item {
  text-align: center;
}
.material_right {
  width: 957px;
  height: 635px;
  background: rgba(255, 255, 255, 1);
  overflow: hidden;
}
.mlr_40 {
  margin-left: 40px;
  margin-right: 40px;
}
.actives {
  width: 4px;
  height: 18px;
  background: rgba(39, 164, 254, 1);
  margin-top: 4px;
}
.dis_f {
  display: flex;
}
.pb_29 {
  padding-bottom: 29px;
}
.bor_bottom {
  border-bottom: 1px dashed rgba(153, 153, 153, 0.1);
}
.color_333 {
  color: #333;
}
.font_18 {
  font-size: 18px;
}
.font_16 {
  font-size: 16px;
}
.dis_f_j_b {
  display: flex;
  justify-content: space-between;
}
.mt_38 {
  margin-top: 30px;
}
.mt_10 {
  margin-top: 10px;
}
.ma_button {
  width: 88px;
  height: 34px;
  border: 1px solid rgba(39, 164, 254, 1);
  color: #27a4fe;
  line-height: 34px;
  text-align: center;
}
</style>